<template>
  <Tabs>
    <TabPane label="基本信息">
      <Form ref="roleInfo" :model="roleInfo" :label-width="150" :rules="ruleInline">
        <FormItem label="角色标识符" prop="name">
          <Input v-model="roleInfo.name" placeholder="角色标识符"></Input>
        </FormItem>
        <FormItem label="角色名称">
          <Input v-model="roleInfo.title" placeholder="角色名称"></Input>
        </FormItem>
        <FormItem label="详细描述">
          <Input v-model="roleInfo.description" type="textarea" :rows="4"  placeholder="详细描述"></Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="post('roleInfo',roleInfo)">保存</Button>
        </FormItem>
      </Form>
    </TabPane>

    <TabPane label="授权">

    </TabPane>
  </Tabs>
</template>
<script>
  import {role} from "@/api";
  import {
    InputNumber,
    Button,
    Form,
    FormItem,
    Input,
    Tabs,
    TabPane,
    RadioGroup,
    Radio,
    Select,
    Option
  } from "iview";
  import {mapGetters, mapActions} from "vuex";

  export default {
    components: {
      InputNumber,
      Button,
      Form,
      FormItem,
      Input,
      Tabs,
      TabPane,
      RadioGroup,
      Radio,
      Select,
      Option
    },
    data() {
      return {
        roleInfo: {
          id: "",
          name: "",
          title: "",
          description: ""
        },
        ruleInline: {
          name: [{required: true, message: "角色标识符必须填写", trigger: "blur"}],
          email: [{required: true, message: "角色名称必须填写", trigger: "blur"}],
        },

      };
    },
    methods: {
      post(type, data) {
        if (type === 'roleInfo') {
          this.$refs["roleInfo"].validate(valid => {
            if (valid) {
              if (this.roleInfo.id) {
                //更新数据
                role.update(this.roleInfo.id, this.roleInfo).then(res => {
                  if (res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/ucenter/role/list");
                  }
                });
              } else {
                //新增数据
                role.create(this.roleInfo).then(res => {
                  if (res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/ucenter/role/list");
                  }
                });
              }
            } else {
              this.$Message.error("请填写必要信息");
            }
          });
        }
      },
      get(id) {
        role.getInfo(id, {}).then(res => {
          this.roleInfo = res.data;
        });
      }
    },
    computed: {
      //...mapGetters(["getUser"])
    },
    mounted() {
      if (this.$route.query.id) {
        this.get(this.$route.query.id);
      }
    }
  };
</script>
